<template>
  <div class="subscribe">
    <p class="alert-p">提供您的详细信息，以便我们对您的预约尽快做出响应</p>
    
    <div class="title-block">个人信息</div>
    <div class="content-block" style="height: 100px">
      <i class="name-i"></i>
      <group class="form" style="border-bottom: 1px solid #eee;">
        <x-input placeholder="姓名" v-model="nameValue" placeholder-align="right"></x-input>
      </group>
      <i class="mobile-i"></i>
      <group class="form" style="border-bottom: 1px solid #eee;">
        <x-input placeholder="手机号" v-model="mobileValue" placeholder-align="right"></x-input>
      </group>
    </div>

    <div class="title-block">房屋信息</div>
    <div class="content-block" style="height: 493px">
      <i class="address-i"></i>
      <group class="form" style="border-bottom: 1px solid #eee;">
        <x-address title="" v-model="addressValue" :list="addressData" placeholder="房屋地址"></x-address>
      </group>
      <i class="house-i"></i>
      <group class="form" style="border-bottom: 1px solid #eee;">
        <popup-radio placeholder="户型" :selected-label-style="{color: '#e60000'}" :options="houseData" v-model="houseValue"></popup-radio>
      </group>
      <i class="area-i"></i>
      <group class="form" style="border-bottom: 1px solid #eee;">
        <x-input placeholder="房屋面积" v-model="areaValue" placeholder-align="right"></x-input>
      </group>
      <i class="budget-i"></i>
      <group class="form" style="border-bottom: 1px solid #eee;">
        <x-input placeholder="预算" placeholder-align="right" mask="￥999999999" :max="10" v-model="budgetValue"></x-input>
      </group>
      <i class="design-i"></i>
      <group class="form">
        <radio :options="designData" v-model="designValue" style="margin-top: -3px"></radio>
      </group>
      <i class="level-i"></i>
      <group class="form">
        <checker
          v-model="levelValue" 
          default-item-class="level-item-block" 
          selected-item-class="level-item-active-block" 
          @on-change="handleChangeLevel"
          style="padding-bottom: 20px;"
        >
          <checker-item
            v-for="(level, index) in levelData"
            :key="index"
            :value="index"
            :style="index === 0 ? '' : {marginLeft: '4%'}"
          >&yen;{{level}}/㎡
          </checker-item>
        </checker>
      </group>
      <i class="remark-i"></i>
      <group class="form">
        <x-textarea :max="200" placeholder="备注" class="textarea-block" v-model="remarkValue"></x-textarea>
      </group>
    </div>
    <div style="height: 60px"></div>
    <button class="submit-btn">提 交</button>
  </div>
</template>

<script>
import { Group, XInput, XAddress, ChinaAddressV4Data, PopupRadio, Radio, Checker, CheckerItem, XTextarea } from 'vux'

export default {
  components: {
    Group,
    XInput,
    XAddress,
    PopupRadio,
    Radio,
    Checker,
    CheckerItem,
    XTextarea
  },
  data () {
    return {
      nameValue: '',
      mobileValue: '',
      addressValue: [],
      houseValue: '',
      areaValue: '',
      designValue: [],
      levelValue: 1,
      budgetValue: '',
      remarkValue: '',
      addressData: ChinaAddressV4Data,
      houseData: ['小型', '中型', '大型', '复式', '别墅'],
      designData: [ '需要设计', '不需要设计' ],
      levelData: ['70', '200', '400']
    }
  },
  methods: {
    handleChangeLevel () {
      console.log(this.levelValue)
    }
  }
}
</script>

<style lang="less">
.subscribe {
  padding: 0 10px 60px 40px;
  .weui-cells:before {
    width: 0;
  }
  .weui-cell:before {
    width: 0;
  }
  .weui-cells:after {
    width: 0;
  }
  .weui-icon-clear {
    margin-top: -5px;
    margin-left: 45%;
  }
  .alert-p {
    margin-top: 20px;
    font-size: 12px;
    color: @bg-font-color;
  }
  .title-block {
    margin-top: 15px;
    font-size: 14px;
    color: @font-vice-color;
  }
  .content-block {
    background: #fff;
    box-shadow: 0 5px 15px @shadow-color;
    width: 100% - 10px;
    border-radius: 10px;
    padding: 15px;
    margin-top: 5px;
  }
  .form {
    position: relative;
    float: right;
    width: 80%;
    margin-top: -15px;
  }
  i {
    position: absolute;
    left: 80px;
    width: 30px;
    height: 30px;
  }
  .name-i {
    background: url('../assets/name.png') no-repeat;
    background-size: cover;
    top: 110px;
  }
  .mobile-i {
    background: url('../assets/mobile.png') no-repeat;
    background-size: cover;
    top: 162px;
  }
  .address-i {
    background: url('../assets/address.png') no-repeat;
    background-size: cover;
    top: 283px;
  }
  .house-i {
    background: url('../assets/house.png') no-repeat;
    background-size: cover;
    top: 333px;
  }
  .area-i {
    background: url('../assets/area.png') no-repeat;
    background-size: cover;
    top: 383px;
  }
  .budget-i {
    background: url('../assets/budget.png') no-repeat;
    background-size: cover;
    top: 433px;
  }
  .design-i {
    background: url('../assets/design.png') no-repeat;
    background-size: cover;
    top: 483px;
  }
  .level-i {
    background: url('../assets/level.png') no-repeat;
    background-size: cover;
    top: 583px;
  }
  .remark-i {
    background: url('../assets/remark.png') no-repeat;
    background-size: cover;
    top: 640px;
  }
  .level-item-block {
    width: 29.5%;
    height: 30px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 13px;
    margin-top: 18px;
  }
  .level-item-active-block {
    border-color: @btn-color;
    background: #ffffff url(../assets//active.png) no-repeat right bottom;
    background-size: 25px;
  }
  .textarea-block {
    border: 1px solid #eee;
    border-radius: 10px;
  }
  .submit-btn {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 70%;
    height: 40px;
    border: none;
    border-radius: 20px;
    background: @btn-color;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 10px 15px @btn-shadow-color;
  }
}
</style>
